<template>
  <div ref="chart" style="width: 100%; height: 100px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  watch: {
    data: {
      handler() {
        this.initChart();
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize); // 监听窗口大小变化
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.chart);
      this.updateChart();
    },
    updateChart() {
      const total = this.data.reduce((sum, item) => sum + item.value, 0);
      const maleValue = this.data.find(item => item.name === '男性').value;
      const femaleValue = this.data.find(item => item.name === '女性').value;

      const option = {

        tooltip: {
          trigger: 'item',
          formatter:(params)=>{
            return `${((params.value / total) * 100).toFixed(2)}%`
          },
          // formatter: (params) => `${params.name} ${params.value}人\n${((params.value / total) * 100).toFixed(2)}%`
        },
        grid: {
          left: '0%',
          right: '0%'
        },
        xAxis: {
          type: 'value',
          show: false // Hide x-axis
        },
        yAxis: {
          type: 'category',
          show: false // Hide y-axis
        },
        series: [
          {
            name: '男',
            type: 'bar',
            stack: '总人数',
            data: [maleValue],
            barWidth: '15px',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
              color: '#5470C6',
              borderRadius: [10, 0, 0, 10] // Top corners
            },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => {
                const percentage = (params.value / total * 100).toFixed(2) + '%';
                return `${params.seriesName}:${params.value}人\n${percentage}`;
              },
              color: '#000'
            }
          },
          {
            name: '女',
            type: 'bar',
            stack: '总人数',
            data: [femaleValue],
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
              color: '#FF4C52',
              borderRadius: [0, 10, 10, 0] // Bottom corners
            },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => {
                const percentage = (params.value / total * 100).toFixed(2) + '%';
                return `${params.seriesName}:${params.value}人\n${percentage}`;
              },
              color: '#000'
            }
          }
        ],
        graphic: [
          {
            type: 'text',
            left: '0%',
            top: '80%',
            style: {
              fontSize: 16,
              fontWeight: 'bold',
              text: `男: ${maleValue}人`,
              verticalAlign: 'top'
            }
          },
          {
            type: 'text',
            right: '0%',
            top: '80%',
            style: {
              fontSize: 16,
              fontWeight: 'bold',
              text: `女: ${femaleValue}人`,
              verticalAlign: 'middle'
            }
          }
        ]
      };

      this.myChart.setOption(option);
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize(); // Resize chart
      }
    }
  }
};
</script>

<style scoped>
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
